#include("/template/common/layout/_page_layout.html")
#@layout()

#define css()
<!--Font Awesome [ OPTIONAL ]-->
<link href="#(RESOURCE_HOST)/static/plugins/magic-check/css/magic-check.min.css" rel="stylesheet">

<!--Bootstrap Validator [ OPTIONAL ]-->
<link href="#(RESOURCE_HOST)/static/plugins/bootstrap-validator/bootstrapValidator.min.css" rel="stylesheet">
<link href="#(RESOURCE_HOST)/static/plugins/bootstrap-datepicker/bootstrap-datepicker.min.css" rel="stylesheet">
<!--Switchery [ OPTIONAL ]-->
<link href="#(RESOURCE_HOST)/static/plugins/switchery/switchery.min.css" rel="stylesheet">
<link href="#(RESOURCE_HOST)/static/plugins/bootstrap-select/bootstrap-select.min.css" rel="stylesheet">
<style>
    #avatar {
        width: 220px;
        height: 200px;
        padding-right: 12px;
    }

    .file {
        position: relative;
        display: block;
        line-height: 30px;
        background: #9acd32;
        margin: 10px auto;
        overflow: hidden;
        color: white;
        text-decoration: none;
        text-indent: 0;
        padding-left: 10px;
        float: left;
        width: 100px;
    }

    .file input {
        position: absolute;
        font-size: 75pt;
        right: 0;
        top: 0;
        opacity: 0
    }

    .file:hover {
        background: #aadffd;
        border-color: #78c3f3;
        color: #004974;
        text-decoration: none
    }
</style>
#end

#define js()
<script src="#(RESOURCE_HOST)/static/js/demo/AppUtils.js"></script>
<!--Bootstrap Validator [ OPTIONAL ]-->
<script src="#(RESOURCE_HOST)/static/plugins/bootstrap-validator/bootstrapValidator.min.js"></script>

<!--Masked Input [ OPTIONAL ]-->
<script src="#(RESOURCE_HOST)/static/plugins/masked-input/jquery.maskedinput.min.js"></script>

<!--Bootstrap Select [ OPTIONAL ]-->
<script src="#(RESOURCE_HOST)/static/plugins/bootstrap-select/bootstrap-select.js"></script>

<!--Form validation [ SAMPLE ]-->
<script src="#(RESOURCE_HOST)/static/js/demo/form-validation.js"></script>
<script src="#(RESOURCE_HOST)/static/plugins/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
<script src="#(RESOURCE_HOST)/static/plugins/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js"></script>
<script src="#(RESOURCE_HOST)/static/js/jquery-form.js"></script>
<!--<script src="#(RESOURCE_HOST)/static/js/layui/lay/modules/layer.js"></script>-->
<script src="#(RESOURCE_HOST)/static/js/sysuser/sys_user_add.js"></script>
<script src="#(RESOURCE_HOST)/static/plugins/bootbox/bootbox.min.js"></script>
<!--Switchery [ OPTIONAL ]-->
<script src="#(RESOURCE_HOST)/static/plugins/switchery/switchery.min.js"></script>
<script src="#(RESOURCE_HOST)/static/js/demo/bootstrapSelectUtils.js"></script>
<script>
    function preview(file) {//预览图片得到图片base64
        var reader = new FileReader();
        reader.onload = function (evt) {
            $("#avatar").attr("src", evt.target.result);
        }
        reader.readAsDataURL(file.files[0]);
    }

    $(function () {
        $('.input-group.date').datepicker({
            autoclose: true,
            language: "zh-CN",
            format: "yyyy-mm-dd"
        });

        $("#demo-bv-accordion").ajaxForm(function (data) {

            bootbox.alert(data.msg, function () {
                window.location.href = "/system/user";
            });
        });
    });

</script>
#end

#define content()
<div id="container">
    <!--Page content-->
    <!--===================================================-->
    <div id="page-content" class="effect">
        <div class="panel">

            <div class="panel-heading">
                <div class="panel-control">
                    <button id="back" onclick="back()" class="btn btn-info btn-labeled icon-lg ion-reply">返回
                    </button>
                </div>
                <h3 class="panel-title">用户新增编辑</h3>
            </div>
            <div class="panel-body">
                <!--<div class="row">-->
                <div class="col-lg-12" style="margin-top: 10px;">
                    <!-- FORM VALIDATION ON ACCORDION -->
                    <!--===================================================-->
                    <form id="demo-bv-accordion" class="form-horizontal" action="/system/user/postAdd" method="post"
                          enctype="multipart/form-data">
                        <div id="demo-accordion" class="panel-group accordion">
                            <div class="panel">
                                <!-- Accordion title -->
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-parent="#demo-accordion" data-toggle="collapse"
                                           href="#demo-acc-panel-1">帐号</a>
                                    </h4>
                                </div>
                                <!-- Accordion content -->
                                <div id="demo-acc-panel-1" class="panel-collapse collapse in">
                                    <div class="panel-body">
                                        <div class="form-group">
                                            <label class="col-lg-3 control-label">用户名</label>
                                            <div class="col-lg-7">
                                                <input type="text" class="form-control" name="username"
                                                       placeholder="用户名">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-lg-3 control-label">Email 地址</label>
                                            <div class="col-lg-7">
                                                <input type="email" class="form-control" name="email"
                                                       placeholder="Email">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-lg-3 control-label">密码</label>
                                            <div class="col-lg-7">
                                                <input type="password" class="form-control" name="password"
                                                       placeholder="密码">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="panel">

                                <!-- Accordion title -->
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-parent="#demo-accordion" data-toggle="collapse"
                                           href="#demo-acc-panel-2">个人信息</a>
                                    </h4>
                                </div>

                                <!-- Accordion content -->
                                <div id="demo-acc-panel-2" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <div class="form-group">
                                            <label class="col-lg-3 control-label">头像</label>
                                            <div class="col-lg-1">
                                                <!-- <img id="avatar"  class="form-control" src="#(RESOURCE_HOST)/static/img/nohead-img.png" /> -->
                                                <img id="avatar" class="form-control"
                                                     src="#(RESOURCE_HOST)/static/img/nohead-img.png">
                                                <a href="javascript:;" class="file">
                                                    <i class="fa fa-image"></i>
                                                    <span>上传图片</span>
                                                    <input type="file" name="avatar" onchange="preview(this)">
                                                </a>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-lg-3 control-label">全名</label>
                                            <div class="col-lg-4">
                                                <input type="text" class="form-control" name="fullname"
                                                       placeholder="全名">
                                            </div>
                                            <!-- <div class="col-lg-4">
                                                 <input type="text" class="form-control" name="lastName" placeholder="名">
                                             </div>-->
                                        </div>
                                        <div class="form-group">
                                            <label class="col-lg-3 control-label">性别</label>
                                            <div class="col-lg-7">
                                                <div class="radio">
                                                    <input id="demo-radio-1" class="magic-radio" type="radio"
                                                           name="gender"
                                                           value="1">
                                                    <label for="demo-radio-1">男</label>
                                                    <input id="demo-radio-0" class="magic-radio" type="radio"
                                                           name="gender"
                                                           value="0">
                                                    <label for="demo-radio-0">女</label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-lg-3 control-label">证件类型</label>
                                            <div class="col-lg-2">
                                                <select class="form-control" name="credentialType">
                                                    <option value="0">身份证</option>
                                                    <option value="1">军官证</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-lg-3 control-label">证件类型</label>
                                            <div class="col-lg-4">
                                                <input type="text" class="form-control" name="credentialNum"
                                                       placeholder="证件号码">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="panel">

                                <!-- Accordion title -->
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-parent="#demo-accordion" data-toggle="collapse"
                                           href="#demo-acc-panel-3">在职信息</a>
                                    </h4>
                                </div>
                                <!-- Accordion content -->
                                <div id="demo-acc-panel-3" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <div class="form-group">
                                            <label class="col-lg-3 control-label">部门</label>
                                            <div class="col-lg-5">
                                                <select id="department" class="selectpicker" data-live-search="true" name="department" data-width="100%">
                                                    <option value="0">no thing select</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-lg-3 control-label">职位</label>
                                            <div class="col-lg-5">
                                                <select id="position" class="selectpicker" data-live-search="true" name="position" data-width="100%">
                                                    <option value="0">no thing select</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-lg-3 control-label">是否在职</label>
                                            <!--<input id="demo-sw" class="form-control" style="height: 34px" type="checkbox" name="isEnable" checked >-->
                                            <div class="col-lg-5">
                                                <!--Switchery : Checked-->
                                                <!--===================================================-->
                                                <input id="demo-sw" class="form-control" type="checkbox" name="isEnable" checked >
                                                <!--===================================================-->
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                            <div class="panel">
                                <!-- Accordion title -->
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-parent="#demo-accordion" data-toggle="collapse"
                                           href="#demo-acc-panel-4">详细资料</a>
                                    </h4>
                                </div>
                                <!-- Accordion content -->
                                <div id="demo-acc-panel-4" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <div class="form-group">
                                            <label class="col-lg-3 control-label">手机号码</label>
                                            <div class="col-lg-7">
                                                <input type="text" class="form-control" name="phoneNumber"
                                                       placeholder="手机号码">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-lg-3 control-label">出生日期</label>
                                            <div class="col-lg-2">
                                                <div class="input-group date">
                                                    <input type="text" class="form-control" name="birthday">
                                                    <span class="input-group-addon"><i class="demo-pli-calendar-4"></i></span>
                                                </div>
                                            </div>

                                        </div>
                                        <div class="form-group">
                                            <div class="col-lg-7 col-lg-offset-3">
                                                <button type="submit" class="btn btn-primary" name="signup"
                                                        value="Sign up">提 交
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                    <!--===================================================-->
                    <!-- END FORM VALIDATION ON ACCORDION -->
                    <!--</div>-->
                </div>
            </div>
        </div>
    </div>
    <!--===================================================-->
    <!--End page content-->

    <!-- SCROLL PAGE BUTTON -->
    <!--===================================================-->
    <button class="scroll-top btn">
        <i class="pci-chevron chevron-up"></i>
    </button>
    <!--===================================================-->
</div>
#end